{#配置项测试  echarts编辑器 #}
{% extends 'base.html' %}


{% block container %}

{#    测试图表#}
    <div id="chart" style="width: 400px;height: 400px;"></div>
    <div id="chart2" style="width: 400px;height: 400px;"></div>


<a  href="#!"  class="button waves-red" onclick="openConfig()">打开配置</a>
<a  href="#!"  class="button waves-red" onclick="switchDom()">切换 chart2编辑的 dom 测试 </a>

{#    宽高修改#}
    {#    基本的 常用的 图表编辑模块#}
    {% raw %}
    <div id="chartEdit" >
        图表高度: {{ chart.height }}px <input   v-on:input="changeSize('height')" v-model="chart.height" id="chart_height" type="range" min="300" max="1000" name="test"/>
       <!-- 暂时只修改高度，框高都变 图表宽度: {{ chart.width }}px <input  v-model="chart.width" v-on:change="changeSize('width')" id="chart_width" type="range" min="300" max="1000" name="test"/> -->

        <div class="divider"></div>
        <div class="section">
            <h5>标题设置</h5>
            <!--循环生成标题修改-->
            <div class="row" v-for="(title,index) in option.title">
            <div class="col s6">
                <label><input type="checkbox"  v-on:change="changeOption()"  v-model="title.show"/><span>标题 {{ index }}</span></label>
                <input  id="chart_title"  v-on:change="changeOption()" v-model="title.text"/>
            </div>
            <div class="col s6">副标题{{ index }}:<input  v-on:change="changeOption()" v-model="title.subtext"/></div>
            </div>

        </div>

        <div class="divider"></div>
        <div class="section">
            <h5>格子(Grid)设置</h5>

            <div class="row" v-for="(grid,index) in option.grid">
                <h6>Grid {{ index }}</h6>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.width" v-model="grid.width" title="宽度"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.width" v-model="grid.height" title="高度"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.top" v-model="grid.top" title="距离顶部"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.bottom" v-model="grid.bottom" title="距离底部"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.left" v-model="grid.left" title="距离左边"></div>
                <div  class="col s6" is="percent-range" v-on:change="changeOption" value="grid.left" v-model="grid.right" title="距离右边"></div>
            </div>
        </div>

    <div class="divider"></div>j
        <div class="section">
            <h5>图例</h5>

            <div class="row" v-for="(legend,index) in option.legend">
                <!--<h6>Legend {{ index }}</h6>-->
               <label><input type="checkbox" v-on:change="changeOption" v-model="legend.show"/><span>显示</span></label>
            </div>
        </div>


    </div>

{% endraw %}

{#    高级的修改 ,option编辑器 #}
    <div id="optionEdit">

    </div>


 <div class="input-field ">
          <input id="password" type="text" class="validate">
          <label for="password">输入框测试</label>
        </div>

{#    嵌套测试 #}
    <ul class="collapsible">

    <li>
        <div class="collapsible-header">二级展开</div>
        <div class="collapsible-body">
            <ul class="collapsible">
                <li> <div class="collapsible-header">二级展开</div>
        <div class="collapsible-body">
            <ul class="collapsible">
                <li>三级</li>
                <li>T三级</li>
            </ul>
        </div></li>
                <li>Test2</li>
            </ul>
        </div>
    </li>

    </ul>





    <div class="sidenav" style="width: 500px" id="slide">

        <h4>图表配置</h4>


            {# 配置项 #}
    <div  class="container" ></div>
{#        容器配置#}


        {% raw %}
    <div id="option">

        <nav class="teal nav-wrapper">
            <div class="col s12">
                <a href="#!" class="breadcrumb"  v-on:click="enterObjectByOffset(index)" v-for="(name,index) in path">{{ name }}</a>
            </div>
        </nav>

        <!-- select数组选择  -->

        <!-- 键值对界面 -->
        <ul class="collection">
            <li  class="collection-item" v-for="(value,key) in getObjects"><a href="#!" v-on:click="enterObject(value)">{{ value }}</a></li>
        </ul>

        <div class="divider"></div>
        <!-- 输入界面 -->

        <div class="row" v-for="edit in getEditors">

            <div class="col s12" v-if="edit.input_type==='checkbox'">
            <label>
                <input v-on:change="changeOption()" v-model="edit.object[edit.key]" type="checkbox" class="filled-in"/>
                <span>{{ edit.key }}</span>
            </label>
            </div>
            <div class="input-field col s12" v-else>
                <input  type="text"  v-on:change="changeOption()" v-model="edit.object[edit.key]" class="validate" v-bind:id="'edit-'+edit.key" />
                <label :for="'edit-'+edit.key" class="active">{{ edit.key }}</label>
            </div>
        </div>

    </div>
        {% endraw %}

    </div>


{% endblock %}





{% block script %}


     <script type="text/javascript" src="{{ url_for('static',filename='components.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static',filename='js/echarts.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static',filename='chart/chartEditor.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='chart/EChartEditor.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='chart/OptionEditor.js') }}"></script>

    <script type="text/javascript">


    var chartEditor = new ChartEditor();


        //
        function switchDom() {
            console.log('切换到chart2');
           // echartEdit = new EChartEditor(document.getElementById('chart2'));
            echartEdit.setChartByDom(document.getElementById('chart2'));
            optionEdit.setChartByDom(document.getElementById('chart2'));

        }
        //生成侧滑的配置
        function openConfig() {

            slide.open();



            console.log("图表配置:");
            console.log(chart.getOption());

            {# 存放配置的容器#}
            var container = document.getElementById('option');


            console.log("初始化..");


            //旧版编辑器...全部显示的
            //chartEditor.setChartId('chart');
            //chartEditor.generateConfig(container);


    }






    {#生成测试图表#}
    var chart = echarts.init(document.getElementById('chart'));
    var chart2 = echarts.init(document.getElementById('chart2'));

    var options = {
        legend:{
            bottom:0
        },
        title:{
            text:"测试图表"
        },
        grid:{
            top:40,
            show:true
        },
        series:{
            type:'pie',
            data:[
                {name:"Android",value:40},
                {name:"Linux",value:30},
                {name:"Windows",value:3}
            ]
        }
    };
    var baroption = {
        title:{text:'dd'},
        grid:{},
        xAxis:{
            data:['MT管理器','ADK编辑器','Apktool+Helper']
        },
        yAxis:{},

        series:{
            label:{
                show:true,
                position:'right'
            },
            type:'bar',
            data:[100,56,10]
        }
    };

    chart.setOption(options);
    chart2.setOption(baroption);


    var slide;
    {#初始化侧滑栏#}
    document.addEventListener('DOMContentLoaded',function (evt) {
        slide=M.Sidenav.init(document.getElementById('slide'),{
         preventScrolling:false,
        //关闭时
        edge:'right',
            onOpenEnd:function(){

            },
        onCloseEnd:function () {



            //chartEditor.updateChart();

        }
    });


    });


    var chartDom = document.getElementById('chart');
    var echartEdit = new EChartEditor();
    echartEdit.setChartByDom(chartDom);

    var optionEdit = new OptionEditor();
    optionEdit.setChartByDom(chartDom);

    </script>

{% endblock %}